<template>
  <el-dialog v-model="dialogVisible" title="上传附件">
    <el-select v-model="version" placeholder="Select" style="width: 240px" @change="versionChange">
      <el-option v-for="item in options" :key="item.data_value" :label="item.data_name" :value="item.data_value" />
    </el-select>
    <el-select
      v-if="version === '承道'"
      v-model="fileType"
      placeholder="Select file type"
      style="width: 240px; margin-left: 10px"
      @change="fileTypeChange"
    >
      <el-option label="Excel" value="excel" />
      <el-option label="Zip" value="zip" />
    </el-select>
    <el-upload
      ref="uploadRef"
      :headers="UploadHeaders"
      :data="UploadData"
      class="upload-demo"
      name="files"
      :action="apiUrl"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <!-- <el-button @click="closeDialog">关闭对话框</el-button> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import { dictDataGetListApi } from "@/api/conventional"
import { getToken } from "@/utils/cache/cookies"
import { ref } from "vue"
import { ElMessage } from "element-plus"
const version = ref("兑接")
const options = ref<any[]>([])
const fileType = ref("excel")
const ExceededTimeFun = async () => {
  const res = await dictDataGetList("OUT_EXCEL")
  options.value = res.data
}
const dictDataGetList = async (type: string) => {
  try {
    const res = await dictDataGetListApi({ type_code: type })
    return res
  } catch (error) {
    console.error("Error:", error)
  }
}

const versionChange = (val: string) => {
  UploadData.versionType = val
  // Reset fileType when version changes
  if (val !== "承道") {
    fileType.value = "excel"
  }
  updateApiUrl()
}

const fileTypeChange = (val: string) => {
  UploadData.fileType = val
  updateApiUrl()
}

const updateApiUrl = () => {
  if (version.value === "承道" && fileType.value === "zip") {
    apiUrl.value = import.meta.env.VITE_BASE_API + "/Common/uploadZip"
  } else {
    apiUrl.value = import.meta.env.VITE_BASE_API + "/Common/getUpload"
  }
}

const apiUrl = ref(import.meta.env.VITE_BASE_API + "/Common/getUpload")
const UploadHeaders = {
  "X-Token": getToken()
}
const UploadData = {
  uploadType: "received",
  versionType: version.value,
  fileType: fileType.value
}
const uploadRef = ref<any>(null)
const dialogVisible = ref(false)
const handleSuccess = (response: any, file: any, fileList: any) => {
  // 处理上传成功的逻辑
  console.log("response")
  console.log(response)
  if (response.code === 200) {
    ElMessage({
      message: "上传成功",
      type: "success"
    })
    if (uploadRef.value) {
      uploadRef.value.clearFiles()
    }
    closeDialog(response.data)
  } else {
    ElMessage.error(response.message)
    if (uploadRef.value) {
      uploadRef.value.clearFiles()
    }
  }
  console.log(response, file, fileList)
}

const handleError = (err: any, file: any, fileList: any) => {
  console.error("upload error:", err)
  console.log(file)
  console.log(fileList)
  ElMessage.error("上传失败，请重试")
  if (uploadRef.value) {
    uploadRef.value.clearFiles()
  }
}

const beforeUpload = (file: any) => {
  // 在上传之前的逻辑，例如文件类型、大小的检查
  console.log(file)
  return true // 返回 true 表示允许上传，返回 false 则取消上传
}
const dialogShow = () => {
  ExceededTimeFun()
  dialogVisible.value = true
}
const closeDialog = (data: any) => {
  emit("uploadClose", data)
  dialogVisible.value = false
}
const emit = defineEmits(["uploadClose"])
defineExpose({ dialogShow })
</script>

<style>
.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  border: 1px dashed #ccc;
}
</style>
